<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .movebox{
            width: 100px;
            height: 100px;
            background-color: red;
            /* 声明调用movebox动画，
                movebox为关键帧
                2s动画时间
                默认动画只执行1次 
                infinite 循环的执行
            */
            animation: movebox 2s infinite ;
            /* 改变默认方式，支持坐标系 
                position位置，relative 相对坐标
            */
            position: relative;
        }
        /* 定义movebox动画 (关键key帧frame) 
        动画由一帧一帧图片组成，1秒36帧以上，肉眼无法查看
            from开始的位置，to结束的位置
            过程css+html会自动产生中间的过程
            动画一定要设置它的坐标系
        */
        @keyframes movebox {
            from{
                left: 0px;
            }
            to{
                left: 100px;
            }
        }
    </style>
</head>
<body>
    <h3>移动方块动画效果</h3>
    <h5>animation语法</h5>
    <div class="movebox">

    </div>
</body>
</html>